import { createGridView, boundField, commandField } from "myWuZhui";
import { receivementAccount as dsReceivementAccount } from 'admin/services/dataSource';
import { FormValidator, rules as r } from "maishu-dilu";
import ReactDOM = require("react-dom");
import React = require("react");
import * as chitu from "maishu-chitu";

export default function (page: chitu.Page) {
    ReactDOM.render(<ReceivementAccountPage />, page.element);
}

interface State {
    item: ReceivementAccount
}


class ReceivementAccountPage extends React.Component<any, State>{
    validator: FormValidator;
    dialogElement: any;
    itemsTable: HTMLTableElement;


    constructor(props) {
        super(props)
        this.state = { item: this.emptyItem() }
    }

    emptyItem(): ReceivementAccount {
        return { Name: "", Remark: "" } as ReceivementAccount;
    }


    componentDidMount() {
        createGridView({
            dataSource: dsReceivementAccount,
            element: this.itemsTable,
            columns: [
                boundField({ dataField: 'Id', visible: false }),
                boundField({ dataField: 'Name', headerText: '名称', headerStyle: { width: '300px' } as CSSStyleDeclaration }),
                boundField({ dataField: 'Remark', headerText: '备注' }),
                commandField({
                    leftButtons: (dataItem) => [
                        <button key="edit" className="btn btn-minier btn-primary"
                            onClick={() => {
                                this.showUpdateDialog(dataItem);
                            }}>
                            <i className="icon-pencil" />
                        </button>
                    ],
                    headerStyle: { width: `100px` } as CSSStyleDeclaration
                })
            ]
        })

        this.validator = new FormValidator(this.dialogElement,
            { name: 'name', rules: [r.required('请输入收款账户名称')] }
        )
    }
    showAddDialog() {
        // this.state.item = this.emptyItem();
        // this.setState(this.state);
        this.setState({ item: this.emptyItem() })
        ui.showDialog(this.dialogElement);
    }
    showUpdateDialog(item: ReceivementAccount) {
        // this.state.item = item;
        // this.setState(this.state);
        this.setState({ item })
        ui.showDialog(this.dialogElement);
    }
    async saveReceivementAccount() {
        let { item } = this.state;
        let isValid = await this.validator.check();
        if (!isValid) {
            return Promise.reject('validate fail');
        }
        if (item.Id) {
            return dsReceivementAccount.update(item);
        }

        return dsReceivementAccount.insert(item);
    }
    render() {
        let { item } = this.state;
        return [
            <ul key="toolbar">
                <li className="pull-right">
                    <button className="btn btn-sm btn-primary"
                        onClick={() => this.showAddDialog()}>
                        <i className="icon-plus" />
                        <span>添加</span>
                    </button>
                </li>
            </ul>,
            <table key="items" ref={(e: HTMLTableElement) => this.itemsTable = e || this.itemsTable}>
            </table>,
            <div key="dialog" className="modal" ref={(e: HTMLElement) => this.dialogElement = e || this.dialogElement}>
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close"
                                onClick={() => this.showAddDialog()}>
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 className="modal-title">{item.Id ? '更新收款账户' : '添加收款账户'}</h4>
                        </div>
                        <div className="modal-body form-horizontal">
                            <div className="form-group">
                                <label className="col-lg-2 control-label">
                                    名称
                                </label>
                                <div className="col-lg-10">
                                    <input name="name" type="text" className="form-control"
                                        value={item.Name}
                                        onChange={(e) => {
                                            item.Name = (e.target as HTMLInputElement).value;
                                            this.setState(this.state);
                                        }} />
                                </div>
                            </div>
                            <div className="form-group">
                                <label className="col-lg-2 control-label">
                                    备注
                                </label>
                                <div className="col-lg-10">
                                    <input name="remark" type="text" className="form-control"
                                        value={item.Remark}
                                        onChange={(e) => {
                                            item.Remark = (e.target as HTMLInputElement).value;
                                            this.setState(this.state);
                                        }} />
                                </div>
                            </div>
                        </div>
                        <div className="modal-footer">
                            <button name="cancel" type="button" className="btn btn-default"
                                onClick={() => ui.hideDialog(this.dialogElement)}>
                                取消
                            </button>
                            <button name="ok" type="button" className="btn btn-primary"
                                ref={(e: HTMLButtonElement) => {
                                    if (!e) return;
                                    ui.buttonOnClick(e, async () => {
                                        let result = await this.saveReceivementAccount()
                                        ui.hideDialog(this.dialogElement);
                                        return result;
                                    })
                                }}>
                                确定
                        </button>
                        </div>
                    </div>
                </div>
            </div>
        ]
    }
}
